<template>
    <div class="dialog">
        <el-dialog :title="dialog.title" v-model="dialog.show">
            <div class="form">
                <el-form ref="form" :model="formData" :rules="form_rules" labe-width="120px"
                    style="margin: 10px; width: auto">
                    <el-form-item label="项目名称:" prop="projectname" label-width="140px">
                        <el-input type="projectname" v-model="formData.projectname"></el-input>
                    </el-form-item>

                    <el-form-item prop="projectmoney" label="价格:" label-width="140px">
                        <el-input type="projectmoney" v-model="formData.projectmoney"></el-input>
                    </el-form-item>

                    <el-form-item prop="projectdetail" label="项目详情:" label-width="140px">
                        <el-input type="projectdetail" v-model="formData.projectdetail"></el-input>
                    </el-form-item>

                    <el-form-item prop="date" label="发布时间:" label-width="140px">
                        <el-input type="date" v-model="formData.date"></el-input>
                    </el-form-item>

                    <el-form-item prop="projectmanger" label="管理医生:" label-width="140px">
                        <el-input type="projectmanger" v-model="formData.projectmanger"></el-input>
                    </el-form-item>

                    <el-form-item class="text_right" label-width="140px">
                        <el-button @click="dialog.show = false">取消</el-button>
                        <el-button type="primary" @click="onSubmit(form)">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, defineEmits } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["sendMsg"]);
const props = defineProps({
    dialog: Object,
    formData: Object,
});

const form = ref(null);

const form_rules = reactive({
    projectname: [{ required: true, message: "项目名称不能为空!", trigger: "blur" }],
    projectmoney: [{ required: true, message: "价格不能为空!", trigger: "blur" }],
    projectdetail: [{ required: true, message: "项目详情不能为空!", trigger: "blur" }],
    projectmanger: [{ required: true, message: "管理医生不能为空!", trigger: "blur" }],
});

const onSubmit = (form) => {
    form.validate((valid) => {
        if (valid) {
            const url =
                props.dialog.option == "add" ? "add" : `edit/${props.formData.id}`;
            proxy.$axios.post(`/project/${url}`, props.formData).then((res) => {
                // 编辑成功
                if (props.dialog.option == "edit") {
                    proxy.$message({ message: "数据更新成功", type: "success" });
                } else {
                    // 添加成功
                    proxy.$message({ message: "数据添加成功", type: "success" });
                }
                // 隐藏dialog
                props.dialog.show = false;
                // 数据添加后 需要自己刷新 显然不合理
                // this.$emits('update') vue3 setup语法糖不是这样写
                emits("update");
            });
        }
    });
};
</script>
<style lang="less" scoped></style>